<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>在线用户管理</title>
    <div th:replace="common/base"></div>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div style="margin: 0px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item" style="margin: 0px">
                    <div class="layui-inline">
                        <label class="layui-form-label">模块名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/html" id="toolbarOnline">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"><i
                        class="layui-icon">&#xe654;</i>添加
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"><i
                        class="layui-icon">&#xe640;</i>删除
                </button>
            </div>
        </script>

        <table id="onlineTable" lay-filter="onlineTable"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-primary layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>
<!-- 表单弹窗 -->
<script type="text/html" id="onlineDialog">
    <div id="onlineFrm" class="layui-form layuimini-form model-form" action="" lay-filter="onlineFrm">
        <input type="hidden" name="id"/>
        <input type="hidden" name="isDeleted" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <input type="text" id="icon" name="icon" lay-filter="iconPicker" class="hide">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" lay-verify="required" placeholder="请输入排序码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="onlineSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </div>
</script>
<div th:replace="common/baseJS"></div>
<script th:inline="none">
    layui.use(['form', 'table', 'iconPickerFa', 'ab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            iconPickerFa = layui.iconPickerFa,
            ab = layui.ab;

        table.render({
            elem: '#onlineTable',
            url: '/session/active',
            toolbar: '#toolbarOnline',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', hide: true},
                {field: 'name', title: '模块名称'},
                {
                    field: 'icon', title: '图标', templet: function (d) {
                        return '<i class="' + d.icon + '"></i>'
                    }
                },
                {field: 'sort', title: '排序', sort: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            response: {
                statusName: 'status', //规定数据状态的字段名称，默认：code
                statusCode: 200, //规定成功的状态码，默认：0
                msgName: 'hint', //规定状态信息的字段名称，默认：msg
                countName: 'total', //规定数据总数的字段名称，默认：count
                dataName: 'rows' //规定数据列表的字段名称，默认：data
            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('onlineTable', {
                page: {curr: 1},
                where: data.field
            }, 'data');

            return false;
        });
        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 2) {
                    return '模块名称至少得2个字符啊';
                }
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(onlineTable)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                showEditModel();
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('onlineTable')
                    , data = checkStatus.data;
                if (data.length == 0) {
                    ab.window.msg("请至少选择一条数据！", "error");
                    return;
                }
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].id);
                }
                ab.util.deleteForm({
                    url: "/system/online",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify(ids),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        $("#btnSearch").click();
                    }
                });
            }
        });

        /* 表格操作列点击事件 */
        table.on('tool(onlineTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                showEditModel(data);
            } else if (obj.event === 'delete') {
                ab.util.deleteForm({
                    url: "/system/online",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify([data.id]),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        $("#btnSearch").click();
                    }
                });
            }
        });

        //监听表格复选框选择
        table.on('checkbox(onlineTable)', function (obj) {
            // console.log(obj)
        });

        /* 显示表单弹窗 */
        function showEditModel(mData) {
            ab.window.open({
                id: "addOnline",
                title: (mData ? '修改' : '添加') + '在线用户',
                content: $("#onlineDialog").html(),//"/system/online/form",
                area: "500px",
                success: function (layero, dIndex) {
                    ab.util.formRequired();
                    initIcon();
                    // 回显表单数据
                    form.val('onlineFrm', mData);
                    if (mData) iconPickerFa.checkIcon('iconPicker', mData.icon.replace("fa ",""));
                    else iconPickerFa.checkIcon('iconPicker', "");
                    //监听提交
                    form.on('submit(onlineSubmit)', function (data) {
                        if (data.field.icon) data.field.icon = "fa " + data.field.icon;
                        ab.util.submitForm({
                            url: "/system/online",// 请求地址
                            type: !mData ? "post" : "put",// 请求提交方式
                            data: JSON.stringify(data.field),// 发送回去的数据 JSON.stringify(data)
                            success: function (data) {
                                layer.close(dIndex);
                                $("#btnSearch").click();
                            }
                        });
                        return true;
                    });

                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }
        /* 初始化图标 */
        function initIcon() {
            iconPickerFa.render({
                // 选择器，推荐使用input
                elem: '#icon',
                // fa 图标接口
                url: "/ab-ui/lib/font-awesome-4.7.0/less/variables.less",
                // 是否开启搜索：true/false
                search: true,
                // 是否开启分页
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 点击回调
                click: function (data) {
                    // console.log(data);
                },
                // 渲染成功后的回调
                success: function (d) {
                    // console.log(d);
                }
            });
        }
    });
</script>

</body>
</html>